<template>
  <div class="canvans-config">
    <div class="body">
      <el-form label-width="80" class="p-form" label-position="left">
        <el-form-item label="画布名称">
          <el-input v-model="canvasConfig.name" size="small"></el-input>
        </el-form-item>
        <el-form-item label="视图ID">
          <el-text>{{ viewsConfig.id }}</el-text>
        </el-form-item>
        <el-form-item label="位置" class="large_label"> </el-form-item>
        <setting-item-box>
          <setting-item name="x">
            <el-input-number
              v-model="canvasConfig.x"
              controls-position="right"
              size="small"
            >
            </el-input-number
          ></setting-item>
          <setting-item name="y">
            <el-input-number
              v-model="canvasConfig.y"
              controls-position="right"
              size="small"
            >
            </el-input-number>
          </setting-item>
        </setting-item-box>

        <el-form-item label="尺寸" class="large_label"></el-form-item>
        <setting-item-box>
          <setting-item name="宽度">
            <el-input-number
              v-model="canvasConfig.width"
              controls-position="right"
              size="small"
            >
            </el-input-number
          ></setting-item>
          <setting-item name="高度">
            <el-input-number
              v-model="canvasConfig.height"
              controls-position="right"
              size="small"
            >
            </el-input-number>
          </setting-item>
        </setting-item-box>

        <el-form-item
          label="图层"
          class="large_label"
          v-if="!currentPage.isMain"
        ></el-form-item>
        <setting-item-box v-if="!currentPage.isMain">
          <setting-item name="显示">
            <el-switch v-model="currentPage.isShow" size="small"></el-switch>
          </setting-item>
          <setting-item name="层级">
            <el-input-number
              v-model="canvasConfig.zIndex"
              controls-position="right"
              size="small"
            >
            </el-input-number>
          </setting-item>
        </setting-item-box>

        <el-form-item label="背景图" class="large_label"></el-form-item>
        <el-form-item label="应用类型">
          <el-select v-model="canvasConfig.selectColor" size="small">
            <el-option label="应用颜色" :value="true" />
            <el-option label="应用图片" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item label="背景颜色" v-show="canvasConfig.selectColor">
          <el-color-picker
            v-model="canvasConfig.background"
            show-alpha
            size="small"
          />
        </el-form-item>
        <el-form-item label="背景图片" v-show="!canvasConfig.selectColor">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :auto-upload="false"
            action="#"
            :on-change="handleChange"
          >
            <img
              v-if="canvasConfig.backgroundImage"
              :src="canvasConfig.backgroundImage"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="适配方式">
          <el-button-group>
            <template v-for="item in previewTypeList" :key="item.key">
              <el-tooltip
                :show-arrow="false"
                :content="item.desc"
                placement="top"
              >
                <el-button
                  :type="
                    canvasConfig.previewScaleType === item.key ? 'primary' : ''
                  "
                  plain
                  size="small"
                  @click="selectPreviewType(item.key)"
                >
                  <template #icon>
                    <!-- <el-icon size="18">
                      <component :is="item.icon"></component>
                    </el-icon> -->
                    <svg-icon :name="item.icon"></svg-icon>
                  </template>
                </el-button>
              </el-tooltip>
            </template>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup name="CanvansConfig">
import { computed } from "vue"
import { Plus } from "@element-plus/icons-vue"
import { useStore } from "vuex"
import { ElMessage } from "element-plus"
import {
  SettingItem,
  SettingItemBox,
} from "@lowcode/components/ChartItemSetting"
import { pictureProcess } from "@lowcode/utils/file.js"

let store = useStore()
let viewsConfig = computed(() => {
  // return store.state.chartEditStore.editCanvasConfig
  return store.getters["chartEditStore/getPageList"]
})
let canvasConfig = computed(() => {
  // return store.state.chartEditStore.editCanvasConfig
  return store.getters["chartEditStore/getEditCanvasConfig"]
})
let currentPage = computed(() => {
  return store.getters["chartEditStore/getCurrentPage"]
})

const handleAvatarSuccess = (response, uploadFile) => {}
async function handleChange(response, uploadFile) {
  let raw = response.raw
  if (!/(jpe?g|png)$/.test(raw.type)) {
    ElMessage.error("请选择png或jpg格式图片")
    return false
  } else if (raw.size / 1024 / 1024 > 2) {
    ElMessage.error("请上传小于2MB图片!")
    return false
  }
  const imageURL = await pictureProcess(raw)
  canvasConfig.value.backgroundImage = imageURL
}

const previewTypeList = [
  {
    key: "fit",
    title: "自适应",
    icon: "scale",
    desc: "自适应比例展示，页面会有留白",
  },
  {
    key: "scrollY",
    title: "Y轴滚动",
    icon: "fitToHeight",
    desc: "X轴铺满，Y轴自适应滚动",
  },
  {
    key: "scrollX",
    title: "X轴滚动",
    icon: "fitToWidth",
    desc: "Y轴铺满，X轴自适应滚动",
  },
  {
    key: "full",
    title: "铺满",
    icon: "fitToScreen",
    desc: "强行拉伸画面，填充所有视图",
  },
]
// 选择适配方式
const selectPreviewType = key => {
  store.commit("chartEditStore/SET_EDITCANVAS_CONFIG", {
    type: "previewScaleType",
    key: key,
  })
}
</script>

<style lang="scss" scoped>
.canvans-config {
  width: 100%;
  height: 100%;

  .body {
    padding: 10px;
    .p-form {
      ::v-deep(.el-form-item) {
        margin-bottom: 10px;
      }
      ::v-deep(.el-form-item__label) {
        font-size: 12px;
      }
      .el-input {
        width: 90%;
      }
      .avatar {
        width: 90%;
        height: 80px;
        margin: 0 auto;
      }
    }
  }
  .large_label {
    :deep(.el-form-item__label) {
      font-size: 14px !important;
      font-weight: bold;
    }
  }
}
::v-deep(.el-color-picker__trigger, .el-color-picker) {
  width: 100%;
}
::v-deep(.el-color-picker) {
  width: 100%;
}
::v-deep(.el-select) {
  .el-input {
    height: var(--el-component-size-small);
  }
}
</style>
